<template >
    <div>
        <van-nav-bar left-arrow title="登录"/>
        <van-form @submit="onSubmit">
            <van-field
                v-model.trim="userinfo.mobile"
                name="mobile"
                type="text"
                label="手机号"
                placeholder="请输入手机号"
                required
                :rules="[{ required: true, message: '您的手机号不正确' }]"
            />
            <van-field
                v-model.trim="userinfo.code"
                type="password"
                name="code"
                label="验证码"
                placeholder="请输入验证码"
                required
                :rules="[{ required: true, message: '验证码' }]"
            >
                <template #button>
                    <van-button @click.prevent="getCodes" size="small" type="primary">发送验证码</van-button>
                </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                提交
                </van-button>
            </div>
        </van-form>        
    </div>
</template>
<script>
import { userLogin, getCode } from '@/api/user.js';
import {mapMutations} from 'vuex';
export default {
  data () {
    return {
      isLoading:false,
      userinfo:{
        mobile:'13912345678',
        code:'246810'
      }
    }
  },
  methods: {
    ...mapMutations(['mSetTokenInfo']),
    // 登录
    async onSubmit (values) {
      console.log('submit',values);
      // 提示
      this.$toast.loading({
        message: '登录中.....', // 提示文字
        mask: true, // 整体添加一个遮罩
        duration: 0 // 0表示这个提示不会消失,可以用一个新的toast来覆盖它
      })
      const { mobile, code } = values
      try {
        const res = await userLogin(mobile, code);
        this.$toast.loading({
          message: '登录成功', // 提示文字
          mask: true, // 整体添加一个遮罩         
        })
        this.mSetTokenInfo(res.data.data)
        // 跳转到首页
      } catch (err) {
        this.$toast.loading({
          message: '登录失败', // 提示文字
          mask: true, // 整体添加一个遮罩         
        })
      }
    },
    async getCodes(){
      // 获取手机号
      let {mobile} =this.userinfo;
      // 提示
      this.$toast.loading({
        message: '验证码发送中.....', // 提示文字
        mask: true, // 整体添加一个遮罩
        duration: 0 // 0表示这个提示不会消失,可以用一个新的toast来覆盖它
      })
      try {
       const code = await getCode(mobile)   
       console.log(code)
        this.$toast.loading({
          message: '发送成功，请在短信中查看', // 提示文字
          mask: true, // 整体添加一个遮罩         
        })

      } catch (err) {
         this.$toast.loading({
          message: '验证码发送失败', // 提示文字
          mask: true, // 整体添加一个遮罩         
        })
      }
     
    }
  },
}
</script>
